<div class="layui-fluid nepadmin-pad0 nepadmin-mar0 list0 userlist" id="list" lay-title="用户管理">
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card hxr-layui-card" id="userlistv">
					<div class="layui-form hxradmin-card-header">
						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">用户名</label>
								<div class="layui-input-inline">
									<input type="text" name="user" placeholder="请输入" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">角色</label>
								<div class="layui-input-inline">
									<div class="layui-unselect layui-form-select">
										<div class="layui-select-title"><input name="role" @click="roleF" readonly type="text" placeholder="请选择角色" class="layui-input layui-unselect"><i
											 class="layui-edge"></i></div>
										<dl class="layui-anim layui-anim-upbit">
											<dd class="layui-select-tips layui-this">请选择角色</dd>
											<dd :data='x.role_id' v-for="x in role" v-if="x.role_status==1">{{x.role_name}}</dd>
										</dl>
									</div>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">状态</label>
								<div class="layui-input-inline">
									<div class="layui-unselect layui-form-select">
										<div class="layui-select-title"><input name="status" type="text" placeholder="请选择状态" value="" readonly class="layui-input layui-unselect"><i
											 class="layui-edge"></i></div>
										<dl class="layui-anim layui-anim-upbit" style="">
											<dd lay-value="" class="layui-select-tips layui-this">请选择状态</dd>
											<dd data='1'>启用</dd>
											<dd data='2'>停用</dd>
										</dl>
									</div>
								</div>
							</div>
							<div class="layui-inline">
								<button class="layui-btn" data-type="reload" id="search">搜索</button>
							</div>
						</div>
					</div>
					<div class="layui-card-body">
						<div>
							<button class="layui-btn layuiadmin-btn-list" data-type="batchdel">删除</button>
							<button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
						</div>
						<table class="layui-hide" id="list-table" lay-filter="list-table"></table>
						<div id="list-toolbar" style="display: none;">
							<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
			            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
			</div>
					</div>
				</div>
				<script type="text/html" id="list-tableF">
								<input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" lay-filter="list-tableF"
				   value="{{ d.status }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.status == 1 ? 'checked' : '' }}>
				</script>
				<script type="text/html" id="sex">
				  {{#  if(d.sex === 1){ }}
					男
				  {{#  } else if(d.sex === 2) { }}
				    女
					{{#  } else if(d.sex === 0) { }}
					  保密
				  {{#  } }}
				</script>
			</div>
		</div>
	</div>
</div>
<script>
	var userlist=new Vue({
		el:'#userlistv',
		data:{
			role:''
		},
		methods:{
			roleF:function(){
				var _this=this;
				if(!this.role){
					layui.admin.ajax('role/list',{},1).then(function(res){
						_this.role=res.data.list;
					}).catch(function(res){});
				}
			}
		}
	});
	var formurl='auser/userform',formarea=['500px', '630px'];
	//表格数据渲染
	
	layui.use(['table', 'form'], function() {
		var table = layui.table,
			form = layui.form,
			$ = layui.$;
			layui.admin.initlist(table,'admins/list',275,[//admins/list
						[{
							type: 'checkbox',
							fixed:'left'
						},{
							field: 'admin_id',
							title: 'ID',
							width: 60
						}, {
							field: 'admin_name',
							title: '登录名',
							minWidth: 100
						}, {
							field: 'role_name',
							title: '所属角色',
							minWidth: 100
						}, {
							field: 'real_name',
							title: '姓名',
							width: 100
						}, {
							field: 'tel',
							title: '电话',
							minWidth: 200
						}, {
							field: 'email',
							title: '邮箱',
							minWidth: 200
						}, {
							field: 'sex',
							title: '性别',
							width: 70,
							templet:'#sex'
						},{
							field: 'create_time',
							title: '创建时间',
							minWidth: 200,
							sort: true
						}, {
							field: 'login_num',
							title: '登录次数',
							width: 150,
							sort: true
						}, {
							field: 'status',
							title: '启用/停用',
							width: 100,
							templet: '#list-tableF',
							unresize: true
						}, {
							title: '操作',
							toolbar: '#list-toolbar',
							width: 150,
							fixed:'right'
						}]
					])
		//监听表格表单操作
		form.on('switch(list-tableF)', function(obj) {
			var json = JSON.parse(decodeURIComponent($(this).data('json')));
			json = table.clearCacheKey(json);
			layui.admin.ajax('admins/update', {
				status:json.status == 1?2:1,
				admin_id:json.admin_id
			}).then(function(res){
				layui.table.reload('list-table');
			}).catch(function(res){});
		});
		//监听表格操作事件
		table.on('tool(list-table)', function(obj) {
			var data = obj.data;
			//删除
			if (obj.event === 'del') {
				layer.confirm('确定删除' + data.admin_name + '?', function(index) {
					layui.admin.delF(table,'admins/delete',{admin_id:data.admin_id});
				});
			} else if (obj.event === 'edit') { //编辑
				layui.admin.pupF('编辑用户',formarea,formurl, 2, data)
			}
		});
		//监听行双击事件
		/* table.on('rowDouble(list-table)', function(obj) {
			//查看详情
			if($('.userlist').length){
				layui.admin.pupF('用户详情', formarea, formurl, 3, obj.data);
			}
		}); */
		var active = {
			//多行删除
			batchdel: function() {
					layui.admin.delsF(table,'admins/delete','admin_id');
				}
				//添加
				,
			add: function(othis) {
				layui.admin.pupF('添加用户', formarea, formurl, 1, {})
			}
		};
		//操作dom
		$('.layui-btn.layuiadmin-btn-list').on('click', function() {
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
		//搜索
		$('#search').on('click', function() {
			var val1 = $('input[name="user"]'),
				val2 = $('input[name="role"]'),
				val3 = $('input[name="status"]');
			//执行重载
			layui.admin.reloads({
				search_text: val1.val(),
				role_id: val2.attr('data'),
				status: val3.attr('data')
			});
		});
	});
</script>
